import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    content: {
        flex: 1,
        justifyContent: 'center',
        paddingHorizontal: 30,
    },
    title: {
        fontSize: 28,
        fontWeight: 'bold',
        textAlign: 'center',
        marginBottom: 40,
        color: '#333',
    },
    inputContainer: {
        marginBottom: 30,
    },
    inputWrapper: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: 'white',
        borderRadius: 10,
        borderWidth: 1,
        borderColor: '#ddd',
        marginBottom: 15,
    },
    input: {
        flex: 1,
        padding: 15,
        fontSize: 16,
        backgroundColor: 'transparent',
    },
    clearButton: {
        padding: 10,
        justifyContent: 'center',
        alignItems: 'center',
    },
    clearButtonText: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#999',
        textAlign: 'center',
        width: 20,
        height: 20,
        lineHeight: 20,
    },
    loginButton: {
        borderRadius: 5,
        marginBottom: 15,
    },
    settingsButton: {
        position: 'absolute',
        top: 50,
        right: 20,
        padding: 8,
        zIndex: 10,
    },
    settingsIcon: {
        width: 24,
        height: 24,
    },
    modalContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    modalContent: {
        backgroundColor: 'white',
        padding: 20,
        borderRadius: 10,
        width: '80%',
        alignItems: 'center',
    },
    modalTitle: {
        fontSize: 20,
        fontWeight: 'bold',
        marginBottom: 20,
    },
    modalInput: {
        backgroundColor: 'white',
        borderRadius: 10,
        padding: 15,
        marginBottom: 20,
        borderWidth: 1,
        borderColor: '#ddd',
        width: '100%',
    },
    modalButtonContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '100%',
        gap: 10,
    },
    modalButton: {
        flex: 1,
        marginLeft: 5,
    },
    cancelButton: {
        backgroundColor: '#f5f5f5',
        borderColor: '#ddd',
        borderWidth: 1,
        flex: 1,
        marginRight: 5,
    },
    logo: {
        width: 140,
        height: 140,
        alignSelf: 'center',
        marginBottom: 20,
    },
}); 